<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import echarts from 'echarts'
import 'echarts-gl'
import chartMixins from '../tw-lib-base/chart/chart'
import wordCloud from 'echarts-wordcloud/dist/echarts-wordcloud.min.js'
import 'echarts-liquidfill'

export default {
  name: 'chart-customized-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'bar',
      cusoption: {}
    }
  },

  computed: {
    option () {
      return {}
    }
  },

  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart)

      if (this.useMapJson && this.mapjsondata) {
        echarts.registerMap('customap', this.mapjsondata)
      }
      if (this.data.length > 0) {
        this.setSeries()
      }
    },

    setSeries () {
      let vm = this
      if (this.funcOption !== '' && typeof this.funcOption === 'function') {
        this.funcOption(vm)
      } else if (this.useMapJson) {
        this.loadMap('customap')
      } else {
        this.cusoption= {
          legend: {},
          tooltip: {},
          dataset: {
            source: vm.data
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [
            {type: 'bar'}
          ]
        }
        if (this.data.length > 0) {
          this.chart.setOption(this.cusoption, true)
        }
        this.resize()
      }
    },

    setOption () {

    },

    resize () {
      this.chart.resize({
        width: this.$el.offsetWidth || this.$ui.el.innerWidth(this.$el.parentElement) || parseInt(this.width),
        height: parseInt(this.height) || this.$el.offsetHeight
      })
    },
    handleclick (params) {

    },
    tooltipFunction () {

    },
    axisFunction () {

    },
    /**
    * 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
    * @params {String} mapCode:json数据的地址
    * @params {String} name: 地图名称
    */
    loadMap (name) {
      let vm = this

      let option = {
        color: vm.colors,
        legend: {
          data: ['小学', '初中']
        },
        tooltip: {
          trigger: 'item',
          formatter: function (data) {
            return data.name + '<br />' + data.marker + data.seriesName + ':' + data.value[2]
          }
        },
        animation: true,
        geo3D: {
          map: name,
          viewControl: {
            center: [0, 0, 15],
            distance: 150,
            alpha: 40,
            beta: 60
          },
          itemStyle: {
            borderColor: 'rgb(62,215,213)',
            areaColor: '#244779',
            opacity: 0.8,
            borderWidth: 1
          },
          emphasis: { // 当鼠标放上去  地区区域是否显示名称
            itemStyle: {
              color: '#fff'
            },
            label: {
              show: false
            }
          },
          shading: 'lambert',
          light: { // 光照阴影
            main: {
              color: '#1E90FF', // 光照颜色
              intensity: 1.2, // 光照强度
              shadowQuality: 'high',  // 阴影亮度
              shadow: true, // 是否显示阴影
              alpha: 55,
              beta: 30
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [
          {
            type: 'bar3D',
            name: '小学',
            coordinateSystem: 'geo3D',
            bevelSize: 0,
            label: {
              show: false
            },
            emphasis: { // 当鼠标放上去  地区区域是否显示名称
              label: {
                show: false
              }
            },
            shading: 'lambert',
            data: [{
              name: '侯家塘街道',
              value: [
                112.99307,
                28.178376,
                100
              ]
            },
            {
              name: '左家塘街道',
              value: [
                113.014788,
                28.176705,
                100
              ]
            },
            {
              name: '圭塘街道',
              value: [
                113.055766,
                28.135052,
                100
              ]
            },
            {
              name: '砂子塘街道',
              value: [
                113.009765,
                28.16779,
                100
              ]
            },
            {
              name: '东塘街道',
              value: [
                112.994973,
                28.16015,
                100
              ]
            },
            {
              name: '雨花亭街道',
              value: [
                113.038955,
                28.143404,
                100
              ]
            },
            {
              name: '高桥街道',
              value: [
                113.034434,
                28.16854,
                100
              ]
            },
            {
              name: '洞井镇',
              value: [
                113.044801,
                28.103282,
                100
              ]
            },
            {
              name: '黎托乡',
              value: [
                113.065557,
                28.173842,
                100
              ]
            },
            {
              name: '环保科技产业园',
              value: [
                113.044376,
                28.07376,
                100
              ]
            }]
          }
        ]
      }
      vm.chart.clear()
      vm.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
